<script setup>
import { ref, watch } from 'vue'
import api from '@/api/index.js'
import { getConsants } from '@/utils'
import GuiJi from './GuiJi.vue'
import WbLog from './WbLog.vue'
import WxLog from './WxLog.vue'

const emits = defineEmits(['close', 'init', 'reload'])
const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({})
  },
  faMenuSltOpt: {
    type: Array,
    default: () => []
  }
})
// 弹窗标题
const title = '工单详情'
// 表单数据
const formData = ref({})
// 是否显示弹窗
const show = ref(false)
// 同步表格数据到表单数据内
watch(
  () => props.curRow,
  async (val) => {
    // 按钮类型的父节点id为数组，需要特殊处理
    formData.value = { ...formData.value, ...val }
    if (val.machineId && show.value) {
      const { data } = await api.getMachinInfo({ id: val.machineId })
      formData.value = { ...formData.value, ...val, ...data }
    } else {
      formData.value = {}
    }
  },
  { deep: true, immediate: true }
)
// 弹窗显示状态切换时触发
const afterOpenChange = (bool) => {
  if (!bool) {
    formData.value = {}
    emits('reload')
    emits('close')
  }
}
// 打开弹窗
const open = () => {
  show.value = true
}
defineExpose({ open })

const infos = ref([
  { label: '农机名称', span: 1, prop: 'machineName' },
  {
    label: '农机类型',
    span: 1,
    prop: 'machineType',
    format: (e) => getConsants('machine_type', e)
  },
  { label: '农机编号', span: 1, prop: 'machineNo' },
  {
    label: '农机状态',
    span: 1,
    prop: 'machineStatus',
    format: (e) => getConsants('machine_status', e)
  },
  {
    label: '当前位置',
    span: 1,
    prop: 'currentLocation',
    format: () => {
      if (formData?.value?.currentGpsInfo?.longitude) {
        return `${formData.value.currentGpsInfo.longitude}，${formData.value.currentGpsInfo.latitude}`
      } else {
        return '--'
      }
    }
  },
  { label: '作业类型', span: 1, prop: 'workType' },
  { label: '农机归属', span: 3, prop: 'belongOrgName' },
  {
    label: '农机维保周期',
    span: 3,
    prop: 'checkInfo',
    format: (e) => {
      const list = e.split(',')
      return `${list[0]}${list[1]}${list[2]}次 - ${list[3]}`
    }
  },
  { label: '农机用途描述', span: 3, prop: 'useDescribe' },
  { label: '备注', span: 3, prop: 'remark' }
])
</script>

<template>
  <a-drawer
    :maskClosable="false"
    :closable="false"
    destroyOnClose
    v-model:open="show"
    class="custom-class"
    root-class-name="root-class-name"
    :title="title"
    placement="right"
    @after-open-change="afterOpenChange"
    width="1400px"
  >
    <a-descriptions title="基础信息" bordered style="margin-bottom: 20px">
      <a-descriptions-item
        :span="item.span"
        :label="item.label"
        v-for="(item, index) of infos"
        :key="index"
      >
        {{ (item?.format ? item.format(formData?.[item.prop]) : formData?.[item.prop]) || '--' }}
      </a-descriptions-item>
    </a-descriptions>
    <a-tabs type="card">
      <a-tab-pane key="1" tab="维修记录">
        <WxLog :machineId="formData.machineId" />
      </a-tab-pane>
      <a-tab-pane key="2" tab="维保记录">
        <WbLog :machineId="formData.machineId" />
      </a-tab-pane>
      <a-tab-pane key="3" tab="农机轨迹">
        <GuiJi :deviceNo="formData.deviceNo" />
      </a-tab-pane>
    </a-tabs>
    <template #footer>
      <div style="display: flex; gap: 5px">
        <a-button type="primary" ghost @click="show = false">关闭</a-button>
      </div>
    </template>
  </a-drawer>
</template>
